import React, {Component} from 'react'
import {connect} from 'react-redux'
import { Link } from "react-router-dom"

import {ActionSheet,List, Modal,DatePicker, Button, Toast } from 'antd-mobile';

import {formatDate} from "../utils/datetime"
import {showActionSheet} from "../utils/three_ant"

import Header from "../components/header"
import {loadBankPayList,loadBankTransferType,saveIncBankPay,payTraditionBank} from "../redux/actions/userAction"
import {post} from "../utils/url"
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

export class componyPay extends Component {
  constructor (props){
   super(props)
   const {user} = this.props
   this.state= {
    clicked:"",
    visible: false,
    date:now,
    type:"",
    bankType:0,
    name:"姓名"
   }
}
componentWillMount(){
  const {dispatch,user,match} = this.props
  user.get("bankpaylist").length==0 && dispatch(loadBankPayList())
  user.get("bankTransfertype").length==0 && dispatch(loadBankTransferType())
  // const {user,match} = this.props
  const {key} = match.params
  console.log(key);
  
  let name1 = ""
  switch (+key) {
    case 1:
      name1 = "姓名"
      break;
    case 2:
    name1 = "微信昵称"
    break;
    case 3:
    name1 = "支付宝昵称"
      break;
    default:
      name1 = "姓名"
      break;
  }
  this.setState({name:name1})
}
componentWillReceiveProps(newprops){
  // if()
//   const {user} = newprops
//  user.get("bankpaylist").length>0 && this.setState({
//   clicked :user.get("bankpaylist")[0].bankType
//  })
}
submit(){
  const {bankType,date,type} = this.state
  const {dispatch,user,history,match} = this.props
  const {balance,name} = this.refs;
  if(!balance.value || isNaN(balance.value)){
    return Toast.fail("请输入充值额度")
  }

  if(!name.value){
    return Toast.fail("姓名不能为空")
  }
  if(balance.value.indexOf(".")<1){
    const prompt = Modal.prompt;
    return prompt(
      '金额',
      '输入金额需要包含两位小数点(已自动生成，可修改)',
      [
        { text: '手动添加' },
        { text: '确认提交', onPress: money => {this.refs.balance.value=money , this.submit()}},
      ],'default', balance.value+"."+Math.floor(Math.random() * 91 + 10),
      'secure-text',
    )
  }
  // return balance.value
  const {key} = match.params
    if(key == 1){
      var bankindex = 0
      var typeindex = 0
    }else if(key == 2){
      var bankindex = 1
      var typeindex = 6
    }else if(key==3){
      var bankindex = 2
      var typeindex = 5
    }
  var postbankType= bankType.id || user.get("bankpaylist")[bankindex].id
  var payNo= bankType.payNo || user.get("bankpaylist")[bankindex].payNo
  var companyBank =bankType.hkCompanyBank || user.get("bankpaylist")[bankindex].hkCompanyBank
  var bankTransfertype = type || user.get("bankTransfertype")[typeindex].codeShowName
  var payType = bankType.payType || user.get("bankpaylist")[bankindex].payType
  //money,pageNo,time,payType,companyBank,hkType,hkUserName
  Toast.loading("提交中",0)
  dispatch(payTraditionBank(balance.value,payNo,formatDate(date),payType,companyBank,bankTransfertype,name.value,(ok,data)=>{
      
      ok ? (Toast.success(data.msg),history.push("/my")) :  (Toast.fail(data.msg))
  }))
}

   render() {
    const {user,match} = this.props
    var banklist = []
    var bankTransfertype = []
    var reduxBanklist = user.get("bankpaylist")
    var defaultBank = ""
    const {key} = match.params
    if(key == 1){
      var bankindex = 0
      var typeindex = 0
    }else if(key == 2){
      var bankindex = 1
      var typeindex = 6
    }else if(key==3){
      var bankindex = 2
      var typeindex = 5
    }
    reduxBanklist.length>0 && (reduxBanklist.map((item,index)=>{
       banklist.push(item.bankType)
    }),defaultBank =reduxBanklist[bankindex].bankType)

    var reduxBankTransfertype = user.get("bankTransfertype")
    var defaultBankType = ""
    reduxBankTransfertype.length>0 && (reduxBankTransfertype.map((item,index)=>{
      bankTransfertype.push(item.codeShowName)
   }),defaultBankType =reduxBankTransfertype[typeindex].codeShowName)
    // console.log(this.state.name,defaultBank);
    
   return <div className="withdraw">
          <Header title="入款表单" {...this.props}></Header>
          <div className="withdraw-contanier">
            {/* <div className="waring">您还没有绑定银行卡</div>
            <div className="notice">
               银行卡信息修改请联系客服处理(最多绑定5张银行卡)
            </div>
            <Link to="/my/add/bank">点击添加银行卡</Link> */}
        <div className="withdrawbody">
          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">充值金额:</label>
            <input type="number" placeholder="请填写充值金额" ref="balance"/>
          </div>

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">汇入银行:</label>
          <div className="selectbox">
          <div className="sbwrap" onClick={()=>{
            bankindex == 0  &&
             showActionSheet(
              banklist,
             "选择您汇入的银行卡", 
             (value,index)=>{this.setState({clicked: value,bankType:reduxBanklist[index]})}
            )
          }}>
            <span className="cont">{this.state.clicked || defaultBank}</span></div>
          </div></div>
          

        

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">汇入时间:</label>
          <div className="selectbox">
          <div className="sbwrap" onClick={() => this.setState({ visible: true })} >
          <span className="cont">{this.state.date && formatDate(this.state.date)}</span></div>
          </div>
          </div>
          <DatePicker
          visible={this.state.visible}
          value={this.state.date}
          onOk={date => this.setState({ date: date, visible: false })}
          onDismiss={() => this.setState({ visible: false })}
        >
        </DatePicker>

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">汇款方式:</label>
          <div className="selectbox">
          <div className="sbwrap"  onClick={()=>{
              bankindex == 0  &&
              showActionSheet(
                bankTransfertype,
              "选择您汇款方式",
              (value)=>{this.setState({ type: value})}
              )
              }}>
          <span className="cont">{this.state.type || defaultBankType}</span></div>
          </div></div>

          <div className="form-group form-group-depth-1 form-group-bank">
          <label className="control-label">汇款人{this.state.name}:</label>
            <input type="text" ref="name" placeholder={"请填写" + this.state.name}/>
          </div>
         
        </div>
          <div className="basepage">
          <div className="tip">
              <p>注：请您转账时在金额后面加个尾数（例如：欲入5000元，请转5000.12元），方便快速到账，谢谢！</p>
          </div>     
              <Button type="primary" onClick={this.submit.bind(this)}>提交表单</Button>
              </div>
        </div>
      </div>
   }
}

function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.My
  }
}

export default connect(mapStateToProps)(componyPay)